import "./App.css";
import { useState, useEffect } from "react";
class ChatAPI {
  constructor() {
    this.listener = {};
    // 假设用户的id有3个
    this.status_data = {
      1: "offline",
      2: "offline",
      3: "offline",
    };
  }
  // 订阅
  subscribeToFriendStatus(id, callback) {
    if (!this.listener[id]) {
      this.listener[id] = [];
    }
    this.listener[id].push(callback);
  }
  // 取消订阅
  unsubscribeFromFriendStatus(id, callback) {
    let index = this.listener[id].indexOf(callback);
    this.listener[id].splice(index, 1);
  }
  // 模拟 简单粗暴 让所有人上线
  publish(status) {
    Object.keys(this.listener).forEach((id) => {
      this.listener[id].forEach((callback) => {
        callback(status);
      });
    });
  }
}
const Chat = new ChatAPI();
// chat.subscribeToFriendStatus(1, (status) => {
//   console.log("1的当前上线状态是", status);
// });
// chat.subscribeToFriendStatus(1, (status) => {
//   console.log("我想知道1在干嘛", status);
// });
// chat.subscribeToFriendStatus(2, (status) => {
//   console.log("2的当前上线状态是", status);
// });
setTimeout(() => {
  Chat.publish("offline");
}, 1000);
setTimeout(() => {
  Chat.publish("online");
}, 2000);
function App(props) {
  // 是否在线， 设置在线状态
  const [isOnline, setIsOnline] = useState(null);

  function handleStatusChange(status) {
    console.log("handleStatusChange", status);
    setIsOnline(status);
  }

  // 继续看useEffect执行时机  特别重要！！！！！！！！！！！！！！！！！！！！！！！！！
  // 第一次初始化  第二次更新

  // 第一次 是componentDidMount
  //
  useEffect(() => {
    // useEffect是必须在DOM真实挂载在页面中，或者已经dom更新完成才执行
    console.log("useEffect执行");

    //他是一个数据接口，可以去获取好友的上线状态
    Chat.subscribeToFriendStatus(props.id, handleStatusChange);

    // 卸载用的
    return () => {
      console.log("useEffect return中的函数 作用是卸载");

      Chat.unsubscribeFromFriendStatus(props.id, handleStatusChange);
    };
  });

  if (isOnline === null) {
    return "Loading...";
  }
  return isOnline;
}
export default App;
